<div class="container">
    <div class="block-header">
        <h2>Table</h2>

        <ul class="actions">
            <li>
                <a href="default.htm">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="default.htm">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="default.htm" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="default.htm">Refresh</a>
                    </li>
                    <li>
                        <a href="default.htm">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="default.htm">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="card">
        <div class="card-header">
            <h2>Basic Table <small>Basic example without any additional modification classes</small></h2>
        </div>

        <div class="card-body table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Benjamin</td>
                        <td>Parnell</td>
                        <td>@wayne234</td>
                        <td>Pokie</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Katherine</td>
                        <td>Buckland</td>
                        <td>@anitabelle</td>
                        <td>Wokie</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Nicholas</td>
                        <td>Walmart</td>
                        <td>@mwalmart</td>
                        <td>Spike</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Striped rows <small>Add zebra-striping to any table row within the tbody</small></h2>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Benjamin</td>
                        <td>Parnell</td>
                        <td>@wayne234</td>
                        <td>Pokie</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Katherine</td>
                        <td>Buckland</td>
                        <td>@anitabelle</td>
                        <td>Wokie</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Nicholas</td>
                        <td>Walmart</td>
                        <td>@mwalmart</td>
                        <td>Spike</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Bordered table <small>Tables with borders on all possible sides of the Table and Cells</small></h2>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Benjamin</td>
                        <td>Parnell</td>
                        <td>@wayne234</td>
                        <td>Pokie</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Katherine</td>
                        <td>Buckland</td>
                        <td>@anitabelle</td>
                        <td>Wokie</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Nicholas</td>
                        <td>Walmart</td>
                        <td>@mwalmart</td>
                        <td>Spike</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Hover Row <small>Enable a hover state on table rows within a tbody</small></h2>
        </div>

        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Benjamin</td>
                        <td>Parnell</td>
                        <td>@wayne234</td>
                        <td>Pokie</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Katherine</td>
                        <td>Buckland</td>
                        <td>@anitabelle</td>
                        <td>Wokie</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Nicholas</td>
                        <td>Walmart</td>
                        <td>@mwalmart</td>
                        <td>Spike</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Table Condensed <small>Make tables more compact by cutting cell padding in half.</small></h2>
        </div>

        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Benjamin</td>
                        <td>Parnell</td>
                        <td>@wayne234</td>
                        <td>Pokie</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Katherine</td>
                        <td>Buckland</td>
                        <td>@anitabelle</td>
                        <td>Wokie</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Nicholas</td>
                        <td>Walmart</td>
                        <td>@mwalmart</td>
                        <td>Spike</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Contextual classes <small>Use contextual classes to color table rows or individual cells.</small></h2>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Nickname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>1</td>
                        <td>Alexandra</td>
                        <td>Christopher</td>
                        <td>@makinton</td>
                        <td>Ducky</td>
                    </tr>
                    <tr class="info">
                        <td>3</td>
                        <td>Sebastian</td>
                        <td>Johnston</td>
                        <td>@sebastian</td>
                        <td>Jaycee</td>
                    </tr>
                    <tr class="warning c-white">
                        <td>4</td>
                        <td>Mitchell</td>
                        <td>Christin</td>
                        <td>@mitchell4u</td>
                        <td>AdskiDeAnus</td>
                    </tr>
                    <tr class="success c-white">
                        <td>2</td>
                        <td>Madeleine</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>Cheese</td>
                    </tr>
                    <tr class="danger c-white">
                        <td>5</td>
                        <td>Elizabeth</td>
                        <td>Belkitt</td>
                        <td>@belkitt</td>
                        <td>Goat</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
